<template>
  <a-modal :open="open" width="1100px" :title="title" centered ok-text="保存" @ok="onOk" @cancel="onCancel">
    <div class="overflow-x-scroll h-[400px] 2xl:h-[600px]">
      <div class="mt-4">
        <PatientInfoForm v-model:value="patientState" value-key="dictItemName" :management-type="1" :show-divider-bot-info="false" item-class="w-1/3" />
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { get, post } from '@/utils/request'
import PatientInfoForm from '@/components/business/PatientInfoForm'

const emit = defineEmits(['update:open', 'success'])
const patientState = ref({})
const props = defineProps({
  open: Boolean,
  title: {
    type: String,
    default: '入院登记'
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})
watch(
  () => props.open,
  (val) => {
    if (val) {
      if (props.rowData !== '') {
        getUser(props.rowData.brId)
      }
    } else {
      patientState.value = {}
    }
  }
)

const getUser = async (id) => {
  if (!id) return
  const data = await get('/common/patient/getPatientInfo?br_id=' + id)
  patientState.value = data.data
}

const onOk = async () => {
  const res = await post('/common/patient/savePatientInfo', {
    ...patientState.value
  })
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  emit('update:open', false)
  emit('success')
}

const onCancel = () => {
  emit('update:open', false)
}
</script>
<style lang="less" scoped>
:deep(.ant-list-items) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .ant-list-item {
    justify-content: center;
    width: 100px;
    height: 60px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid #eee !important;
    border-radius: 8px;
    cursor: pointer;
    &:hover {
      background-color: #3758f110;
    }
    &.active {
      color: #fff;
      background-color: #3758f1;
      &:hover {
        background-color: #3758f1;
      }
    }
  }
}

:deep(.ant-form) {
  display: flex;
  flex-flow: row wrap;
  min-width: 0;
  .ant-form-item {
    .ant-form-item-label {
      width: 80px;
    }
  }
  .ant-picker {
    width: 100%;
  }
}
</style>
